<!DOCTYPE html>
<html>
	{include file="public1/_header" /}
	<style type="text/css">
		#exam table tbody tr th {
			min-width: 100px !important;
		}
		body{
			margin-bottom: 50px;
		}
	</style>
	<body style="background: #fff;">
		<div class="layui-fluid" id="exam">
			<div class="layui-row layui-col-space15">
				<form class="layui-form" action="">
					<div>
						<div class="layui-col-xs12 layui-col-sm6 layui-col-md6">

							<table class="layui-table table-form">
								<colgroup>
									<col width="100">
									<col>
								</colgroup>
								<tbody>
									<tr>
										<th>考试名称 <span style='color:red'>*</span></th>
										<td>
											<input type="text" name="title" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
										</td>
									</tr>
									<tr>
										<th>开始日期 <span style='color:red'>*</span></th>
										<td><input lay-reqText="开始日期必须选择" type="text" readonly="" id="start_date" name="start_date" required
											 lay-verify="required" placeholder="" autocomplete="off" class="layui-input"></td>
									</tr>
									<tr>
										<th>准考证开始号 <span style='color:red'>*</span></th>
										<td>
											<input type="number" name="number_start" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
										</td>
									</tr>

								</tbody>
							</table>

						</div>
						<div class="layui-col-xs12 layui-col-sm6 layui-col-md6">

							<table class="layui-table table-form">
								<colgroup>
									<col width="100">
									<col>
								</colgroup>
								<tbody>
									<tr>
										<th>每班人数 <span style='color:red'>*</span></th>
										<td>
											<input type="number" name="number_pre_class" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
										</td>
									</tr>
									<tr>
										<th>结束时间 <span style='color:red'>*</span></th>
										<td>
											<input lay-reqText="结束时间必须选择" type="text" readonly="" id="end_date" name="end_date" required lay-verify="required"
											 placeholder="" autocomplete="off" class="layui-input">
										</td>
									</tr>
									<tr>
										<th>准考证结束号 <span style='color:red'>*</span></th>
										<td>
											<input type="number" name="number_end" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">

										</td>
									</tr>
								</tbody>
							</table>

						</div>
						<div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
							<table class="layui-table table-form">
								<colgroup>
									<col width="100">
									<col>
								</colgroup>
								<tbody>
									<tr>
										<th>考试地点 <span style='color:red'>*</span></th>
										<td>
											<ul id="demoTree" class="dtree" data-id="0"></ul>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
						<div class="layui-col-xs12 layui-col-sm12 layui-col-md12">

							<table class="layui-table" lay-filter="test" lay-size="sm">
								<colgroup>
									<col width="150">
									<col>
									<col>
									<col>
									<col width="80">
								</colgroup>
								<thead>
									<tr>
										<th style="display: none">序号</th>
										<th>科目</th>
										<th>开始时间</th>
										<th>结束时间</th>
										<th style="text-align: center"><button type="button" class="layui-btn add-btn layui-btn-sm">添加</button></th>
									</tr>
								</thead>
								<tbody class="addlists">
									<tr>
										<td style="display: none">
											<input type="text" name="number1" value="1">
										</td>
										<td class="select"></td>
										<td>
											<input type="text" name="subject[start_time][0]" class="layui-input" id="test1" placeholder="HH:mm:ss">
										</td>
										<td>
											<input type="text" name="subject[end_time][0]" class="layui-input" id="test2" placeholder="HH:mm:ss">
										</td>

										<td style="text-align: center"><button type="button" class="layui-btn layui-btn-sm layui-btn-danger btn-del"
											 lay-event="del">删除</button></td>
									</tr>
								</tbody>
							</table>

						</div>
					</div>
					<div style="text-align: center;">
						<button class="layui-btn" lay-submit lay-filter="formDemo">下一步</button>
						<button type="button" id="close"  class="layui-btn layui-btn-primary">放弃</button>
					</div>
				</form>
			</div>
		</div>
	</body>
	<script>
		$(function() {
			layui.extend({
				dtree: 'dtree/dtree'
			}).use(['form', 'laydate', 'table', 'layer', 'dtree'], function() {
				var form = layui.form,
					laydate = layui.laydate,
					laypage = layui.laypage,
					layer = layui.layer,
					table = layui.table;
				var dtree = layui.dtree;
				//常规用法
				laydate.render({
					elem: '#test1',
					type: 'datetime',
					format: 'yyyy-MM-dd HH:mm:ss'
				});
				laydate.render({
					elem: '#test2',
					type: 'datetime',
					format: 'yyyy-MM-dd HH:mm:ss'
				});
				laydate.render({
					elem: '#start_date'
				});
				laydate.render({
					elem: '#end_date'
				});
			
				//监听单元格编辑
				table.on('edit(test3)', function(obj) {
					var value = obj.value, //得到修改后的值

						data = obj.data, //得到所在行所有键值

						field = obj.field; //得到字段
					layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改为：' + value);
				});
				// 初始化树
				var DemoTree = dtree.render({
					elem: "#demoTree",
					data: {$egetClass},
					menubar: true,
					checkbar: true,
					checkbarType: "all", // 默认就是all，其他的值为： no-all  p-casc   self  only
				});

				dtree.on("node(demoTree)", function(obj) {
					var nodeId = obj.param.nodeId;

					DemoTree.clickNodeCheckbar(nodeId); // 点击节点选中复选框

					var checkbarNodes = dtree.getCheckbarNodesParam("demoTree");
				});


				let i = 1,
					j = 1,
					k = 1;
				$('.add-btn').click(function() {
					i++;
					addstrs1(i);
					form.render();
				});

				$('body').on("click", ".btn-del", function() {
					var pre = $(this);
					layer.confirm('确定要删除么？', {
						btn: ['确定', '取消']
					}, function() {
						$(pre).parent().parent().remove();
						layer.closeAll('dialog');
					})

					//
				});
				var sub = {$subject};
				var select = '<select name="subject[name][0]" lay-filter=""><option value="">请选择科目</option>';
				sub.forEach(function(item,index){
					select +='<option value="'+item.name+'">'+item.name+'</option>';
				})
				select += "</select>";
				$('.select').append(select);
				form.render();
				function getRandomNum() {
					return parseInt(Math.random() * 50);
				}

				function addstrs1(i) {
					let iNums = getRandomNum();
					let strs1;
					var select = '<option value="">请选择科目</option>';
					sub.forEach(function(item,index){
						select +='<option value="'+item.name+'">'+item.name+'</option>';
					})
					strs1 = '<tr><td style="display: none"><input type="text" name="number1" value="' + i +
						'"></td><td><select name="subject[name][' + i +']" lay-filter="">'+select+'</select></td><td><input type="text" name="subject[start_time][' + i +
						']" class="layui-input" id="test1' +
						iNums + '" placeholder="HH:mm:ss"></td><td><input type="text" name="subject[end_time][' + i +
						']" class="layui-input" id="test2' +
						iNums +
						'" placeholder="HH:mm:ss"></td><td style="text-align: center"><button type="button" class="layui-btn layui-btn-sm layui-btn-danger btn-del" lay-event="del">删除</button></td></tr>';
					
					
					form.render();
					$('.addlists').append(strs1);
					//重新渲染
					laydate.render({
						elem: '#test1' + iNums,
						type: 'datetime',
						format: 'yyyy-MM-dd HH:mm:ss',
						trigger: 'click' //采用click弹出
					});
					laydate.render({
						elem: '#test2' + iNums,
						type: 'datetime',
						format: 'yyyy-MM-dd HH:mm:ss',
						trigger: 'click' //采用click弹出
					});
				}

				$("#close").click(function(){
					var index = parent.layer.getFrameIndex(window.name);
					parent.layer.close(index);
				})
				
				//监听提交
				form.on('submit(formDemo)', function(obj) {
					var index = parent.layer.getFrameIndex(window.name);
					var lfc = top.layerFrameConfig;
					var info = lfc.iframeB.info;
				
					var param = dtree.getCheckbarNodesParam(DemoTree);
					var ids = [];
					param.forEach(function(item, index) {
						if(item.basicData){
							ids.push(item.basicData)
						}
					})
					obj.field.class_ids = ids;
					console.log(obj.field)
					$.post("{:url('add')}", obj.field, function(res) {
						if (res.status == 1) {
							layer.msg('添加成功', {
								icon: 1,
								time: 300
							}, function() {
								console.log(res.data)
								window.location.href= "{:url('roomlists')}?id=" + res.data.exam_id;
								// parent.layer.close(index); //再执行关闭
								// info.reload()
							});

						} else {
							layer.msg(res.message)
						}
					})
					return false;
				});
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				

			})
		})
	</script>
</html>
